<div class="app-container with-navbar with-tabbar" ng-controller="MyCashgiftController">

    <div class="navbar fixed-top">
        <div class="navbar-left hide-weixin" ng-click="goProfile()">
            <img class="button-icon" src="image/nav-left.png"/>
            <div class="button-text">返回</div>
        </div>
        <div class="navbar-title">
            我的红包
        </div>
        <div class="navbar-right">
        </div>
    </div>

    <div class="app-content" infinite-scroll='myCashgiftModel.loadMore()'>

        <div class="cashgift-filter">
            <div class="filter-item" ng-class="{active: currentTab == TAB_AVAILABLE}" ng-click="touchTabAvailable()">
                <span class="text">未过期</span>
            </div>
            <div class="filter-item" ng-class="{active: currentTab == TAB_EXPIRED}" ng-click="touchTabExpired()">
                <span class="text">已过期</span>
            </div>
            <div class="filter-item" ng-class="{active: currentTab == TAB_USED}" ng-click="touchTabUsed()">
                <span class="text">已使用</span>
            </div>
        </div>

        <!-- Cashgift -->
        <div class="cashgift-list" ng-if="myCashgiftModel.cashgifts && myCashgiftModel.cashgifts.length">
            <div class="list-item readonly" ng-repeat="cashgift in myCashgiftModel.cashgifts track by $index">
                <div class="item-info">
                    <div class="info-name">{{cashgift.name}}</div>
                    <div class="info-condition">满￥{{cashgift.condition}}可使用</div>
                    <div class="info-expires">有效期：{{cashgift.expires  | localTime}}</div>
                </div>
                <div class="item-value">
                    ￥<em>{{cashgift.value}}</em>
                </div>
            </div>
        </div>

        <div class="empty" ng-if="myCashgiftModel.isEmpty">
            <div class="empty-item">
                <img class="item-logo" ng-src="image/logo-cashgift-empty.png"/>
                <div class="item-text">暂无任何红包</div>
            </div>
        </div>

        <div class="loading-more" ng-if="myCashgiftModel.isLoaded && myCashgiftModel.isLoading">
            正在加载...
        </div>
        <div class="loading-more" ng-if="myCashgiftModel.isLoaded && myCashgiftModel.isLastPage">
            全部加载完毕
        </div>

    </div>

</div>

